<template>
  <div>
    <h1>App</h1>
    <button @click="comp = 'Home'">Home</button>
    <button @click="comp = 'List'">List</button>
    <keep-alive :include="['Home']">
      <component :is="comp" />
    </keep-alive>
  </div>
</template>

<script>
// import Home from './components/Home'
// import List from './components/List'
// 在进行打包时,webpack会将所有的js全部打包到一块,页面载入时全部一起加载,十分消耗性能
// 但是有一种方式可以直接激活内部的分别打包
// 就是使用es6提供的语法import()函数,异步引入,这样在打包时就会分别打包,当当前的组件加载时才会进行当前包的加载,节省性能,在vur-route中
// 使用这种方式进行路由懒加载
const Home = () => {
  return import('./components/Home')
}
const List = () => {
  return import('./components/List')
}
// vue允许在加载时传入一个函数,等到当前组件加载时,执行传入的函数
export default {
  components: {
    Home,
    List,
  },
  data() {
    return {
      comp: 'Home',
    }
  },
}
</script>

<style></style>
